<!-- 节能项目管理 -->
<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">节能项目列表</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          class="m-20px pl-30px pr-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="选择企业">
            <el-select v-model="qy" placeholder="请选择企业">
              <el-option
                v-for="item in qyOption"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择项目名称">
            <el-select v-model="xmmc" placeholder="请选择项目名称">
              <el-option
                v-for="item in xmmcOption"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择立项时间">
            <el-date-picker
              v-model="lxsj"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(lxsj)"
            />
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button
              type="primary"
              class="w-80px rounded-15px"
              :icon="Search"
              @click="loadTableData"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetSearch"
              >重置</el-button
            >
          </div>
        </el-form>

        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 170px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #xmnhpgColumn="{ row }">
            <span>{{ row.xmnhpgzt === 1 ? '达标' : '不达标' }}</span>
          </template>

          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row)">查看</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="节能项目详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in jnxmxqFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <div class="mb-20px text-[#000] font-bold">
        {{ formItem.formLabelText }}
      </div>
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input v-model="item.value" :type="item.type" :disabled="inputDisabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <hr />
    </el-form>
    <div class="mb-20px text-[#000] font-bold">历史能效</div>
    <el-form :inline="true" class="flex ml-20px">
      <el-form-item label="选择参数">
        <el-select v-model="xzcs" class="flex-1" placeholder="请选择参数">
          <el-option v-for="item in xzcsOption" :key="item.id" :label="item.mc" :value="item.dm" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间范围" style="margin-right: 0">
        <el-date-picker
          v-model="sjfw"
          type="daterange"
          class="flex-1"
          range-separator="至"
          unlink-panels
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="dateChangeFormat(sjfw)"
        />
      </el-form-item>
    </el-form>
    <div class="text-right">
      <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="loadEchart"
        >查询</el-button
      >
      <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetEchart"
        >重置</el-button
      >
    </div>
    <div>
      <Echarts ref="echartRef" width="940px" height="400px" class="flex-1"></Echarts>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { dateChangeFormat } from '@/utils/date'

//搜索参数
const pageNo = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)
const qy = ref('')
const xmmc = ref('')
const lxsj = ref(['', ''])

const resetSearch = () => {
  qy.value = ''
  xmmc.value = ''
  lxsj.value = ['', '']

  loadTableData()
}

//字典查询
const qyOption: any = ref([]) //企业
const xmmcOption: any = ref([]) //项目名称
function getDictionary() {
  queryXmmcInfoList().then((res: any) => {
    xmmcOption.value = res.xmmc
  })

  queryQymcInfoList().then((res: any) => {
    qyOption.value = res
  })
}
getDictionary()

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'xmmc',
    label: '项目名称',
    width: 200,
  },
  {
    prop: 'xmdm',
    label: '项目编号',
  },
  {
    prop: 'ssqyMc',
    label: '所属企业',
    width: 240,
  },
  {
    prop: 'lxsj',
    label: '立项时间',
    width: 160,
  },
  {
    prop: 'xmjj',
    label: '项目描述',
    width: 200,
  },
  {
    prop: 'xmfzr',
    label: '项目负责人',
  },
  {
    prop: 'lxdh',
    label: '联系电话',
  },
  {
    slotName: 'xmnhpgColumn',
    type: 'slot',
    label: '项目能耗评估',
  },
  {
    prop: 'pgsj',
    label: '评估时间',
  },
  {
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]
const tableData = ref([])

//加载table数据
function loadTableData() {
  const params = {
    ssqy: qy.value,
    xmmc: xmmc.value,
    startTime: lxsj.value[0],
    endTime: lxsj.value[1],
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }

  queryJnXmInfoList(params).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
loadTableData()

//分页按钮
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`)
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  pageNo.value = val
  loadTableData()
}

//节能项目详情查看
const dialogShow = ref(false)
const inputDisabled = ref(true)
const jnxmxqFormList = [
  {
    formLabelText: '项目基本信息',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'xmmc',
        label: '项目名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'xmdm',
        label: '项目编号',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyMc',
        label: '所属企业',
        type: 'input',
        value: '',
      },
      {
        prop: 'lxsj',
        label: '立项时间',
        type: 'input',
        value: '',
      },
      {
        prop: 'xmfzr',
        label: '项目负责人',
        type: 'input',
        value: '',
      },
      {
        prop: 'lxdh',
        label: '联系电话',
        type: 'input',
        value: '',
      },
      {
        prop: 'xmjj',
        label: '项目详情描述',
        type: 'textarea',
        span: 24,
        value: '',
      },
    ],
  },
  {
    formLabelText: '项目能耗情况',
    formLabelWidth: '160px',
    formList: [
      {
        label: '本月综合能耗',
        type: 'input',
      },
      {
        label: '年度累计综合能耗',
        type: 'input',
      },
      {
        label: '本月用电量',
        type: 'input',
      },
      {
        label: '年度累计用电量',
        type: 'input',
      },
      {
        label: '本月用水量',
        type: 'input',
      },
      {
        label: '年度累计用水量',
        type: 'input',
      },
      {
        label: '本月蒸汽量',
        type: 'input',
      },
      {
        label: '年度累计蒸汽用量',
        type: 'input',
      },
      {
        label: '本月用煤量',
        type: 'input',
      },
      {
        label: '年度累计用煤量',
        type: 'input',
      },
    ],
  },
  {
    formLabelText: '项目能效情况',
    formLabelWidth: '160px',
    formList: [
      {
        label: '本月总产值',
        type: 'input',
      },
      {
        label: '年度总产值',
        type: 'input',
      },
      {
        label: '本月单位产值能耗',
        type: 'input',
      },
      {
        label: '年度单位产值能耗',
        type: 'input',
      },
      {
        label: '本月单位产值电耗',
        type: 'input',
      },
      {
        label: '年度单位产值电耗',
        type: 'input',
      },
      {
        label: '项目能效标准',
        type: 'input',
      },
      {
        label: '项目能效达标率',
        type: 'input',
      },
    ],
  },
]

//查询节能项目详情
const query = (row: any) => {
  queryYnxmxxInfo({ xmId: row.id }).then((res: any) => {
    for (const key in res) {
      jnxmxqFormList[0].formList.forEach((item: any) => {
        if (key === item.prop) {
          item.value = res[key]
        }
      })
    }
    inputDisabled.value = true
    dialogShow.value = true

    nextTick(() => {
      queryZdInfo({ zdxdm: 'dljc' }).then((res) => {
        xzcsOption.value = res
      })

      xzcs.value = ''
      sjfw.value = ['', '']
      echartRef.value.initEchat(lsnxOption)
    })
  })
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

//echarts
const xzcsOption: any = ref([])

const xzcs = ref('')
const sjfw = ref(['', ''])

const loadEchart = () => {
  echartRef.value.initEchat(lsnxOption)
}

const resetEchart = () => {
  xzcs.value = ''
  sjfw.value = ['', '']

  loadEchart()
}

const echartRef = ref(null) as any
const lsnxOption = {
  grid: {
    top: 50,
    left: 40,
    right: 0,
    bottom: 20,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  title: {
    text: '单位产值综合能耗万tce/GDP',
    left: 'right',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  legend: {
    data: ['月度单位产值能耗', '年度单位产值电耗'],
    left: 'left',
  },
  xAxis: {
    type: 'category',
    data: [
      '2022-01',
      '2022-02',
      '2022-03',
      '2022-04',
      '2022-05',
      '2022-06',
      '2022-07',
      '2022-08',
      '2022-09',
      '2022-10',
    ],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '月度单位产值能耗',
      data: [150, 230, 224, 218, 135, 147, 260, 218, 170, 189],
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3AB779',
          lineStyle: {
            color: '#3AB779',
          },
        },
      },
    },
    {
      name: '年度单位产值电耗',
      data: [100, 190, 184, 178, 105, 107, 220, 168, 140, 149],
      type: 'line',
      itemStyle: {
        normal: {
          color: '#0F86E8',
          lineStyle: {
            color: '#0F86E8',
          },
        },
      },
    },
  ],
}
</script>

<style>
hr {
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid #ededed;
}
</style>
